import React, { memo } from 'react';
import { Row, Col, Icon, Tooltip } from 'antd';
import styles from './Analysis.less';
import Trend from '@/components/Trend';
import { ChartCard } from '@/components/Charts';
import numeral from 'numeral';

const topColResponsiveProps = {
  xs: 24,
  sm: 12,
  md: 12,
  lg: 12,
  xl: 6,
  style: { marginBottom: 24 },
};

const IntroduceRow = memo(({ loading, visitData }) => (
  <Row gutter={24}>
    <Col {...topColResponsiveProps}>
      <ChartCard
        bordered={false}
        title="客户总数"
        action={
          <Tooltip title="指示说明">
            <Icon type="info-circle-o" />
          </Tooltip>
        }
        loading={loading}
        total={numeral(5612).format('0,0')}
        footer={
          <div style={{ whiteSpace: 'nowrap', overflow: 'hidden' }}>
            <Trend flag="up" style={{ marginRight: 16 }}>
              月新增
              <span className={styles.trendText}>0 笔</span>
            </Trend>
            <Trend flag="up">
              周新增
              <span className={styles.trendText}>0 笔</span>
            </Trend>
          </div>
        }
        contentHeight={46}
      >
        {/*<Trend flag="up" style={{ marginRight: 16 }}>
          增加
          <span className={styles.trendText}>0 万元</span>
        </Trend>
        <Trend flag="down">
          减少
          <span className={styles.trendText}>0 万元</span>
        </Trend>*/}
      </ChartCard>
    </Col>

    <Col {...topColResponsiveProps}>
      <ChartCard
        bordered={false}
        title="业务总量"
        action={
          <Tooltip title="指示说明">
            <Icon type="info-circle-o" />
          </Tooltip>
        }
        loading={loading}
        total={numeral(32423).format('0,0')}
        footer={
          <div style={{ whiteSpace: 'nowrap', overflow: 'hidden' }}>
            <Trend flag="up" style={{ marginRight: 16 }}>
              月新增
              <span className={styles.trendText}>0 笔</span>
            </Trend>
            <Trend flag="up">
              周新增
              <span className={styles.trendText}>0 笔</span>
            </Trend>
          </div>
        }
        contentHeight={46}
      >
        {/*<Trend flag="up" style={{ marginRight: 16 }}>
          增加
          <span className={styles.trendText}>0 万元</span>
        </Trend>
        <Trend flag="down">
          减少
          <span className={styles.trendText}>0 万元</span>
        </Trend>*/}
      </ChartCard>
    </Col>

    <Col {...topColResponsiveProps}>
      <ChartCard
        bordered={false}
        loading={loading}
        title="在办金额"
        action={
          <Tooltip title="指示说明">
            <Icon type="info-circle-o" />
          </Tooltip>
        }
        total={numeral(8846).format('0,0')}
        footer={
          <div style={{ whiteSpace: 'nowrap', overflow: 'hidden' }}>
            <Trend flag="up" style={{ marginRight: 16 }}>
              月新增
              <span className={styles.trendText}>0 万元</span>
            </Trend>
            <Trend flag="up">
              周新增
              <span className={styles.trendText}>0 万元</span>
            </Trend>
          </div>
        }
        contentHeight={46}
      >
        {/*<MiniArea color="#975FE4" data={visitData} />*/}
      </ChartCard>
    </Col>

    <Col {...topColResponsiveProps}>
      <ChartCard
        bordered={false}
        loading={loading}
        title="放款金额"
        action={
          <Tooltip title="指示说明">
            <Icon type="info-circle-o" />
          </Tooltip>
        }
        total={numeral(6560).format('0,0')}
        footer={
          <div style={{ whiteSpace: 'nowrap', overflow: 'hidden' }}>
            <Trend flag="up" style={{ marginRight: 16 }}>
              月新增
              <span className={styles.trendText}>0 万元</span>
            </Trend>
            <Trend flag="up">
              周新增
              <span className={styles.trendText}>0 万元</span>
            </Trend>
          </div>
        }
        contentHeight={46}
      >
        {/*<MiniBar data={visitData} />*/}
      </ChartCard>
    </Col>
  </Row>
));

export default IntroduceRow;
